<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生数据展示</title>
</head>
<script src="../../js/vue.js"></script>
<style scoped>
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #dee2e6;
        padding: 10px;
        text-align: left;
    }

    button {
        padding: 5px 10px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }
</style>

<body>
<div id="app">
    <div>
        <table>
            <tbody>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>张三</td>
                <td><span style="color:blue">70</span>
                </td>
                <td>
                    <button>修改</button>
                </td>
            </tr>
            <tr>
                <td>李四</td>
                <td>
                    <span style="color:red">50</span>
                </td>
                <td>
                    <button>修改</button>
                </td>
            </tr>
            <tr>
                <td>王五</td>
                <td>
                    <span style="color:blue">80</span>
                </td>
                <td>
                    <button>修改</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            students: [{
                name: '张三',
                score: 70
            },
                {
                    name: '李四',
                    score: 50
                },
                {
                    name: '王五',
                    score: 80
                }
            ]
        },
        methods: {}


    });
</script>
</body>

</html>